<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>全选: <input type="checkbox" class="check-all" ></p>
    <p>单选: <input type="checkbox" class="check-one">
        <input type="checkbox" class="check-one" >
        <input type="checkbox" class="check-one" >
        <input type="checkbox" class="check-one" >
        <input type="checkbox" class="check-one" >
        <input type="checkbox" class="check-one" >
    </p>
</body>
<script>
    var checkAll =  document.getElementsByClassName("check-all")[0]
    var checkOneList = document.getElementsByClassName("check-one");

    // 1.  全选 和  反选  
    // 全选  => 点击全选  所有单选框(check-one)的状态跟随全选(check-all)的状态
    // 反选  => 点击单选  =>  如果所有的单选都选中  => 全选 :选中  否则:不选中
    //                     每次点击都要判断 所有的的单选框是否全部被选中 

    // 全选  => 点击全选  所有单选框(check-one)的状态跟随全选(check-all)的状态
    checkAll.onclick = function(){
        var status = this.checked;
        console.log(status);
        for(var i=0;i<checkOneList.length;i++){
            var checkOne = checkOneList[i];
            checkOne.checked = status;
        }
    }



    for(let i=0;i<checkOneList.length;i++){ // 循环绑定事件
        let checkOne = checkOneList[i];
        checkOne.onclick = function(){
            // 每次点击 => 都要判断  所有的的单选框是否全部被选中 
            // debugger;
            var flag = true; // 假设都选中 => 如果存在未选中的 推翻假设
            for(var j=0;j<checkOneList.length;j++){
                var item = checkOneList[j];
                if(!item.checked){  // item.checked ==false
                    flag = false;
                    break;
                }
            }
            checkAll.checked = flag;
        }
    }


  


</script>
</html>